<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生理数据分析工具 - 首页</title>
    
    <!-- 全局样式文件 -->
    <link rel="stylesheet" href="css/global.css">
    
    <!-- 引入菜单配置文件 -->
    <script src="js/menu-config.js"></script>
    <script src="js/common-header.js"></script>
    
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
</head>
<body>
    <div id="app" class="layout-container">
        <div class="layout-container">
            <div id="header-container"></div>
            
            <!-- 主体内容区域 -->
            <div class="main-container" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
                <!-- 左侧菜单栏 -->
                <aside class="sidebar" :class="{ collapsed: sidebarCollapsed, show: mobileSidebarOpen }">
                    <div class="sidebar-content">
                        <ul class="nav-menu" id="nav-menu">
                            <!-- 菜单项将通过JavaScript动态生成 -->
                        </ul>
                    </div>
                </aside>
                
                <!-- 右侧内容区 -->
                <main class="content-area">
                    <!-- 欢迎横幅 -->
                    <div class="welcome-banner">
                        <div class="banner-content">
                            <h1 class="banner-title">
                                <el-icon style="margin-right: 12px;"><TrendCharts /></el-icon>
                                欢迎使用BrainHorm生理数据分析工具
                            </h1>
                            <p class="banner-subtitle">专业的生理信号数据处理与分析平台，支持EDA和PPG数据的批量解析与深度分析</p>
                            <div class="banner-actions">
                                <el-button type="primary" size="large" @click="goToDataAnalysis">
                                    <el-icon style="margin-right: 8px;"><Upload /></el-icon>
                                    开始数据解析
                                </el-button>
                                <el-button type="success" size="large" @click="goToPPGAnalysis">
                                    <el-icon style="margin-right: 8px;"><Monitor /></el-icon>
                                    PPG指标分析
                                </el-button>
                                <el-button type="info" size="large" @click="goToEDAAnalysis">
                                    <el-icon style="margin-right: 8px;"><Monitor /></el-icon>
                                    EDA指标分析
                                </el-button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 功能特性 -->
                    <div class="features-section">
                        <h2 class="section-title">
                            <el-icon style="margin-right: 8px;"><Star /></el-icon>
                            核心功能
                        </h2>
                        <div class="features-grid">
                            <div class="feature-card" @click="goToDataAnalysis">
                                <div class="feature-icon">
                                    <el-icon><Upload /></el-icon>
                                </div>
                                <h3 class="feature-title">数据解析</h3>
                                <p class="feature-description">
                                    支持S1手环原始数据文件的批量上传与解析，自动提取EDA和PPG信号数据，支持CSV和JSON格式输出。
                                </p>
                                <div class="feature-tags">
                                    <el-tag size="small">批量处理</el-tag>
                                    <el-tag size="small" type="success">多格式输出</el-tag>
                                </div>
                            </div>
                            
                            <div class="feature-card" @click="goToPPGAnalysis">
                                <div class="feature-icon">
                                    <el-icon><Monitor /></el-icon>
                                </div>
                                <h3 class="feature-title">PPG指标分析</h3>
                                <p class="feature-description">
                                    光电容积脉搏波信号分析，提供心率变异性评估，包括RMSSD、SDNN、pNN50等关键指标的计算与可视化。
                                </p>
                                <div class="feature-tags">
                                    <el-tag size="small" type="warning">心率分析</el-tag>
                                    <el-tag size="small" type="info">HRV评估</el-tag>
                                </div>
                            </div>
                            
                            <div class="feature-card" @click="goToEDAAnalysis">
                                <div class="feature-icon">
                                    <el-icon><Monitor /></el-icon>
                                </div>
                                <h3 class="feature-title">EDA指标分析</h3>
                                <p class="feature-description">
                                    皮肤电导信号分析，提供情绪状态评估，包括SCL、SCR等指标的计算，支持压力水平和情绪变化监测。
                                </p>
                                <div class="feature-tags">
                                    <el-tag size="small" type="danger">情绪分析</el-tag>
                                    <el-tag size="small" type="warning">压力监测</el-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 使用流程 -->
                    <div class="workflow-section">
                        <h2 class="section-title">
                            <el-icon style="margin-right: 8px;"><Guide /></el-icon>
                            使用流程
                        </h2>
                        <div class="workflow-steps">
                            <div class="workflow-step">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h3>数据上传</h3>
                                    <p>上传S1手环的原始数据文件（.txt格式），支持单个或批量文件处理</p>
                                </div>
                            </div>
                            <div class="workflow-arrow">
                                <el-icon><ArrowRight /></el-icon>
                            </div>
                            <div class="workflow-step">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h3>数据解析</h3>
                                    <p>自动解析原始数据，提取EDA和PPG信号，生成标准化的数据文件</p>
                                </div>
                            </div>
                            <div class="workflow-arrow">
                                <el-icon><ArrowRight /></el-icon>
                            </div>
                            <div class="workflow-step">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h3>指标分析</h3>
                                    <p>对解析后的数据进行深度分析，计算各项生理指标并生成可视化图表</p>
                                </div>
                            </div>
                            <div class="workflow-arrow">
                                <el-icon><ArrowRight /></el-icon>
                            </div>
                            <div class="workflow-step">
                                <div class="step-number">4</div>
                                <div class="step-content">
                                    <h3>结果导出</h3>
                                    <p>下载分析结果和图表，支持多种格式，便于后续研究和应用</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 技术特点 -->
                    <div class="tech-section">
                        <h2 class="section-title">
                            <el-icon style="margin-right: 8px;"><Setting /></el-icon>
                            技术特点
                        </h2>
                        <div class="tech-grid">
                            <div class="tech-item">
                                <el-icon class="tech-icon"><Lightning /></el-icon>
                                <div class="tech-content">
                                    <h4>高效处理</h4>
                                    <p>采用优化算法，支持大文件快速处理</p>
                                </div>
                            </div>
                            <div class="tech-item">
                                <el-icon class="tech-icon"><Shield /></el-icon>
                                <div class="tech-content">
                                    <h4>数据安全</h4>
                                    <p>本地处理，确保数据隐私和安全性</p>
                                </div>
                            </div>
                            <div class="tech-item">
                                <el-icon class="tech-icon"><TrendCharts /></el-icon>
                                <div class="tech-content">
                                    <h4>专业分析</h4>
                                    <p>基于科学算法的生理信号分析</p>
                                </div>
                            </div>
                            <div class="tech-item">
                                <el-icon class="tech-icon"><Download /></el-icon>
                                <div class="tech-content">
                                    <h4>多格式支持</h4>
                                    <p>支持CSV、JSON等多种数据格式</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 快速开始 -->
                    <div class="quick-start-section">
                        <div class="quick-start-card">
                            <h2>
                                <el-icon style="margin-right: 8px;"><Rocket /></el-icon>
                                快速开始
                            </h2>
                            <p>选择您需要的功能，开始您的生理数据分析之旅</p>
                            <div class="quick-actions">
                                <el-button type="primary" size="large" @click="goToDataAnalysis">
                                    数据解析
                                </el-button>
                                <el-button type="success" size="large" @click="goToPPGAnalysis">
                                    PPG分析
                                </el-button>
                                <el-button type="info" size="large" @click="goToEDAAnalysis">
                                    EDA分析
                                </el-button>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        // 注册所有ElementPlus图标
        const Icons = ElementPlusIconsVue;
        
        const app = createApp({
            data() {
                return {
                    sidebarCollapsed: false,
                    mobileSidebarOpen: false
                };
            },
            mounted() {
                // 初始化通用header
                window.CommonHeader.initHeader('header-container');
                
                // 检查屏幕尺寸，决定是否默认折叠侧边栏
                this.checkScreenSize();
                window.addEventListener('resize', this.checkScreenSize);
                
                // 初始化菜单
                this.initializeMenu();
            },
            beforeUnmount() {
                window.removeEventListener('resize', this.checkScreenSize);
            },
            methods: {
                // 界面控制方法
                toggleSidebar() {
                    if (window.innerWidth <= 575) {
                        this.mobileSidebarOpen = !this.mobileSidebarOpen;
                    } else {
                        this.sidebarCollapsed = !this.sidebarCollapsed;
                    }
                },
                
                checkScreenSize() {
                    if (window.innerWidth <= 575) {
                        this.sidebarCollapsed = false;
                        this.mobileSidebarOpen = false;
                    } else if (window.innerWidth <= 767) {
                        this.sidebarCollapsed = true;
                    } else {
                        this.sidebarCollapsed = false;
                    }
                },
                
                // 初始化菜单
                initializeMenu() {
                    const navMenu = document.getElementById('nav-menu');
                    if (navMenu && window.MenuConfig) {
                        // 使用新的菜单生成函数，传递正确的activeMenuId
                        const menuHTML = window.MenuConfig.generateNavMenuHTML('home');
                        navMenu.innerHTML = menuHTML;
                        
                        // 为菜单项添加点击事件
                        const navLinks = navMenu.querySelectorAll('.nav-link');
                        navLinks.forEach(link => {
                            link.addEventListener('click', (e) => {
                                e.preventDefault();
                                const href = link.getAttribute('href');
                                if (href) {
                                    if (href.includes('index.html') || href === '../index.html') {
                                        // 已经在首页，不需要跳转
                                        return;
                                    } else {
                                        window.location.href = href;
                                    }
                                }
                                
                                // 处理action类型的菜单项
                                const action = link.getAttribute('data-action');
                                if (action) {
                                    if (action === 'showHelp') {
                                        this.showHelp();
                                    } else if (action === 'showAbout') {
                                        this.showAbout();
                                    }
                                }
                            });
                        });
                    }
                },
                
                // 页面跳转方法
                goToDataAnalysis() {
                    window.location.href = 'pages/data-parse.html';
                },
                
                goToPPGAnalysis() {
                    window.location.href = 'pages/ppg-analysis.html';
                },
                
                goToEDAAnalysis() {
                    window.location.href = 'pages/eda-analysis.html';
                },
                
                showHelp() {
                    ElMessageBox.alert(
                        '1. 数据解析：上传S1手环原始数据文件进行解析\n2. PPG分析：对光电容积脉搏波信号进行深度分析\n3. EDA分析：对皮肤电导信号进行情绪状态评估\n4. 支持批量处理和多格式输出',
                        '使用帮助',
                        { confirmButtonText: '知道了' }
                    );
                },
                
                showAbout() {
                    ElMessageBox.alert(
                        'S1生理数据分析工具 v2.0\n\n专业的生理信号数据处理平台，支持EDA和PPG数据的批量解析与分析。\n\n主要功能：\n• 原始数据解析\n• PPG心率变异性分析\n• EDA情绪状态评估\n• 批量处理与可视化',
                        '关于系统',
                        { confirmButtonText: '确定' }
                    );
                }
            }
        });
        
        // 注册所有图标
        Object.keys(Icons).forEach(key => {
            app.component(key, Icons[key]);
        });
        
        // 使用Element Plus
        app.use(ElementPlus);
        
        // 挂载应用
        app.mount('#app');
    </script>
</body>
</html>